/* 让页面所有元素的padding和margin都设置为0 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 设置背景图，字体设置为微软雅黑 */
body {
  font-family: '微软雅黑', sans-serif;
  background: url(./img/bg2.jpg);
  background-color: #b8e2ec;
  background-position: center;
  background-size: 100%;
}

/* 引用图片高度设置为28px，就是页面最上方像屋檐一样的黑色图 */
.headtop {
  height: 28px;
  background: url();
}

/* 整个登录框的css，并使用绝对定位居中 */
.login {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  margin: -150px 0 0 -150px;
}

/* 前面分析过的h1标签的css，text-shadow设置阴影使文字更好看，letter-spacing设置字符间距 */
.login h1 {
  margin-bottom: 20px;
  color: rgb(241, 239, 239);
  letter-spacing: 2px;
  text-align: center;
  text-shadow: 0 12px 10px #145fa5;
}

/* 两个输入框的css，border属性设置边框线粗细以及颜色，border-radius设置边框的圆角角度 */
input {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  color: rgb(8, 8, 8);
  letter-spacing: 2px;
  background-color: #ddd2d2;
  border: 1px solid black;
  border-radius: 4px;
}

/* 登录按钮的css，cursor:pointer当鼠标移到按钮上面时变成小手形状 */
.button {
  width: 100%;

  /* padding: 10px; */
  background-color: #3dc8eb;

  /* border: 1px solid black; */
  border-radius: 4px;
  cursor: pointer;
}
